<template>
  <div class=".sc-AxmLO gmtmqV">
    <div class="sc-fzoXWK fRnHrz">
      <div class="video-container">
        <div class="video">
          <!-- <video src="" controls></video> -->
          <!-- 阿里云播放器初始化容器 -->
          <div class="prism-player" id="J_prismPlayer"></div>
        </div>
        <div class="video-info">
          <h3>321321</h3>
          <div class="video-info-stats">
            <p><span>0 views</span> <span>•</span> <span>12 hours ago</span></p>
            <div class="likes-dislikes flex-row">
              <p class="flex-row like">
                <svg
                  viewBox="0 0 24 24"
                  preserveAspectRatio="xMidYMid meet"
                  focusable="false"
                  fill="#AAAAAA"
                  width="22"
                  height="22"
                >
                  <g>
                    <path
                      d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"
                    ></path>
                  </g>
                </svg>
                <span>0</span>
              </p>
              <p class="flex-row dislike" style="margin-left: 1rem">
                <svg
                  viewBox="0 0 24 24"
                  preserveAspectRatio="xMidYMid meet"
                  focusable="false"
                  width="22"
                  height="22"
                >
                  <g>
                    <path
                      d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v1.91l.01.01L1 14c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"
                    ></path>
                  </g>
                </svg>
                <span>0</span>
              </p>
            </div>
          </div>
        </div>
        <div class="channel-info-description">
          <div class="channel-info-flex">
            <div class="channel-info flex-row">
              <img
                class="avatar md"
                src="https://res.cloudinary.com/douy56nkf/image/upload/v1594060920/defaults/txxeacnh3vanuhsemfc8.png"
                alt="channel avatar"
              />
              <div class="channel-info-meta">
                <h4>
                  <a href="/channel/b41a4163-979c-4224-a879-0a6e009af309"
                    >lipengzhou</a
                  >
                </h4>
                <span class="secondary small">5 subscribers</span>
              </div>
            </div>
          </div>
          <p>321321</p>
        </div>
        <div class="sc-fzoyTs fNzLaQ">
          <h3>2 comments</h3>
          <div class="add-comment">
            <img
              src="https://res.cloudinary.com/douy56nkf/image/upload/v1594060920/defaults/txxeacnh3vanuhsemfc8.png"
              alt="avatar"
            /><textarea placeholder="Add a public comment"></textarea>
          </div>
          <div class="comment">
            <a href="/channel/1311e080-5e0e-4b4b-bb83-08f1a6837649"
              ><img
                src="https://res.cloudinary.com/douy56nkf/image/upload/v1594060920/defaults/txxeacnh3vanuhsemfc8.png"
                alt="avatar"
            /></a>
            <div class="comment-info">
              <p class="secondary">
                <span
                  ><a href="/channel/1311e080-5e0e-4b4b-bb83-08f1a6837649"
                    >akshaydsvg</a
                  ></span
                ><span style="margin-left: 0.6rem">11 hours ago</span>
              </p>
              <p>vnd</p>
            </div>
          </div>
          <div class="comment">
            <a href="/channel/1311e080-5e0e-4b4b-bb83-08f1a6837649"
              ><img
                src="https://res.cloudinary.com/douy56nkf/image/upload/v1594060920/defaults/txxeacnh3vanuhsemfc8.png"
                alt="avatar"
            /></a>
            <div class="comment-info">
              <p class="secondary">
                <span
                  ><a href="/channel/1311e080-5e0e-4b4b-bb83-08f1a6837649"
                    >akshaydsvg</a
                  ></span
                ><span style="margin-left: 0.6rem">11 hours ago</span>
              </p>
              <p>test</p>
            </div>
          </div>
        </div>
      </div>
      <div class="related-videos">
        <h3 style="margin-bottom: 1rem">Up Next</h3>
        <a href="/watch/3ac30e23-45a6-4eca-9430-3654142a772c"
          ><div class="sc-fzozJi dteCCc">
            <img
              class="thumb"
              src="https://res.cloudinary.com/tylerdurden/video/upload/v1610602989/youutbeclone/jcxdkn7kwykw2oyk95up.jpg"
              alt="thumbnail"
            />
            <div class="video-info-container">
              <div class="channel-avatar"></div>
              <div class="video-info">
                <h4>Twitter clone</h4>
                <span class="secondary">manikandanraji</span>
                <p class="secondary">
                  <span>7 views</span> <span>•</span> <span>23 days ago</span>
                </p>
              </div>
            </div>
          </div></a
        ><a href="/watch/05f411f6-9c9d-4e97-8d65-47847cd99e87"
          ><div class="sc-fzozJi dteCCc">
            <img
              class="thumb"
              src="https://res.cloudinary.com/tylerdurden/video/upload/v1610602948/youutbeclone/oyd7npz8vjcspr2musrl.jpg"
              alt="thumbnail"
            />
            <div class="video-info-container">
              <div class="channel-avatar"></div>
              <div class="video-info">
                <h4>Youtubeception</h4>
                <span class="secondary">manikandanraji</span>
                <p class="secondary">
                  <span>1 views</span> <span>•</span> <span>23 days ago</span>
                </p>
              </div>
            </div>
          </div></a
        ><a href="/watch/b4bafa92-b60d-40a8-ad50-ecd47406edd5"
          ><div class="sc-fzozJi dteCCc">
            <img
              class="thumb"
              src="https://res.cloudinary.com/tylerdurden/video/upload/v1610602919/youutbeclone/ahgq3a0glak3sjahvx6n.jpg"
              alt="thumbnail"
            />
            <div class="video-info-container">
              <div class="channel-avatar"></div>
              <div class="video-info">
                <h4>Instaclone</h4>
                <span class="secondary">manikandanraji</span>
                <p class="secondary">
                  <span>1 views</span> <span>•</span> <span>23 days ago</span>
                </p>
              </div>
            </div>
          </div></a
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import { Video, getVideo } from '@/api/video'
import { useRoute } from 'vue-router'
import { getVideoPlayAuth, VideoPlayAuthPayload } from '@/api/vod'

const createPlayer = (data: VideoPlayAuthPayload) => {
  let onReady: (value: unknown) => void
  const p = new Promise(resolve => {
    onReady = resolve
  })
  // eslint-disable-next-line no-new
  new window.Aliplayer(
    {
      id: 'J_prismPlayer',
      width: '100%',
      height: '500px',
      autoplay: false,
      // // 支持播放地址播放,此播放优先级最高
      // source: '播放url',

      // 播放方式二：点播用户推荐
      vid: data.VideoMeta.VideoId,
      playauth: data.PlayAuth,
      cover: data.VideoMeta.CoverURL
      // encryptType: 1 // 当播放私有加密流时需要设置。

      // 播放方式三：仅MPS用户使用
      // vid: '1e067a2831b641db90d570b6480fbc40',
      // accId: 'dd',
      // accSecret: 'dd',
      // stsToken: 'dd',
      // domainRegion: 'dd',
      // authInfo: 'dd',

      // 播放方式四：使用STS方式播放
      // vid: '1e067a2831b641db90d570b6480fbc40',
      // accessKeyId: 'dd',
      // securityToken: 'dd',
      // accessKeySecret: 'dd',
      // region: 'cn-shanghai' // eu-central-1,ap-southeast-1
    },
    function (player: any) {
      onReady(player)
    }
  )
  return p
}

export default defineComponent({
  name: 'WatchIndex',
  setup () {
    const video = ref<Video | null>(null)
    const route = useRoute()
    const lodaVideoInfo = async () => {
      const videoId = route.params.videoId as string
      const { data } = await getVideo(videoId)
      video.value = data.video
    }
    const playVideo = async (vodVideoId: string) => {
      const { data } = await getVideoPlayAuth(vodVideoId)
      createPlayer(data)
      // 获取视频播放凭证
      // 创建播放器，播放视频
    }
    onMounted(async () => {
      await lodaVideoInfo()
      playVideo(video.value?.vodVideoId as string)
    })
    return {
      video
    }
  }
})
</script>
